<template>
	<div class="header-watch">
		<!-- 顶部标题 -->
		<div class="watch-top">
			<span class="iconfont hert" style="float: left;">&#xe699;</span>
			<label class="watch-til" style="float: left;">猜你喜欢</label><br>
		</div>
		<!-- 列表 -->
		<ul>
			<li class="watch-list" v-for="(item,index) in LikeList">
				<img :src="item.hotURL" />
				<aside class="item-til">
					<p class="name">{{item.hottil}}</p>
					<p class="talk"><span class="iconfont star">&#xe812;</span><span class="iconfont star">&#xe812;</span><span class="iconfont star">&#xe812;</span><span
						 class="iconfont star">&#xe812;</span><span class="iconfont star">&#xe812;</span>&nbsp;&nbsp;&nbsp;{{item.pl}}条评论</p>
					<p class="money">
						<span style="color: red;font-size: 0.4rem;">${{item.price}}</span>起
					</p>
				</aside>
				<p class="addres">{{item.dname}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props:['LikeList'],
		data() {
			return {
				
			}
		}
	}
</script>

<style scoped>
	.header-watch {
		width: 100%;
		background-color: white;
		font-size: 0.28rem;
		margin-top: 0.4rem;
	}

	.watch-til {
		color: #212121;
		font-size: 0.4rem;
		font-weight: bold;
	}

	.watch-top {
		line-height: 1rem;
		padding-left: 0.2rem;

	}

	.hert {
		color: orangered !important;
		font-size: 0.48rem;
		/* 24px */

	}

	.watch-list {
		display: flex;
		border-bottom: 1px solid #cccccc;
	}

	.watch-list img {
		width: 2rem;
		height: 2rem;
		position: relative;
		margin: 0.3rem 0rem;
	}

	.item-til {
		margin-left: 0.3rem;
		text-align: left;
	}

	.addres {
		position: absolute;
		margin-top: 2rem;
		padding-left: 6rem;
	}

	.name {
		position: absolute;
		margin-top: 0.4rem;
		font-size: 0.4rem;
	}

	.talk {
		position: absolute;
		margin-top: 1.2rem;

	}

	.money {
		position: absolute;
		margin-top: 1.9rem;
	}

	.star {
		color: yellow;
	}
</style>
